import {
  View, Text, ScrollView,
} from 'react-native'
import React from 'react'
import Modal from '@COMPONENTS/modal/Modal'
import EStyleSheet from 'react-native-extended-stylesheet'
import Button from '@COMPONENTS/button/Button'
import LinearGradient from 'react-native-linear-gradient'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'

interface AppUpdatePopupProps {
  onCancel?: ()=>void
  onConfirm?: ()=>void
}

const AppPrivacyAgreement: React.FC<AppUpdatePopupProps> = ({
  onCancel, onConfirm,
}) => {
  // todo h5跳转
  const userAgreement = () => {}
  const privacyAgreement = () => {}

  return (
    <Modal
      visible
      animationType="fade"
    >
      <View style={styles.container}>
        <View style={styles.top}>
          <LinearGradient
            colors={['#DFFAE9', '#fff']}
          >
            <View style={styles.titlewrap}>
              <Text style={styles.title}>
                温馨提示
              </Text>
            </View>
          </LinearGradient>
          <View style={styles.content}>
            <ScrollView style={styles.contentScroll}>
              <Text style={styles.contentText}>感谢您信任并使用彼爱医疗旗下“纳瑞维Nerivio”产品和服务。</Text>
              <Text>
                <Text style={styles.contentText}>请您充分阅读、理解</Text>
                <Text style={[styles.contentText, styles.link]} onPress={userAgreement}>《纳瑞维用户协议》</Text>
                <Text style={styles.contentText}>和</Text>
                <Text style={[styles.contentText, styles.link]} onPress={privacyAgreement}>《隐私政策》</Text>
                <Text style={styles.contentText}>，以及本提示的全部内容。点击“同意”按钮，即代表您已同意前述协议全部条款以及以下约定。</Text>
              </Text>
              <Text>
                <Text style={styles.contentText}>当您使用以下功能/服务时，我们会申请相应权限:(1)设备信息:使用设备识别码，进行统计、账号安全风控。(2)存储权限、相册权限:联系客服或反馈问题时上传图片。</Text>
              </Text>
              <Text>
                <Text style={styles.contentText}>我们会努力采取各种安全技术，保护您的个人信息。未经您同意，我们不会从第三方获取、共享或对外提供你的信息。</Text>
              </Text>
              <Text style={{ paddingBottom: 17 }}>
                <Text style={styles.contentText}>您可以查询、更正、删除您的个人信息，我们也提供账户注销的渠道。</Text>
              </Text>
            </ScrollView>
            <View style={styles.mask}>
              <LinearGradient
                style={{ flex: 1 }}
                colors={['rgba(255,255,255,0.00)', 'rgba(255,255,255,1)']}
              />
            </View>
          </View>
        </View>
        <View style={styles.bottom}>
          {onCancel && (
            <Button style={styles.leftButton} onPress={onCancel}>
              <Text style={styles.leftText} numberOfLines={1}>
                退出
              </Text>
            </Button>
          )}
          <View style={styles.rightWrap}>
            <LinearGradientButton style={styles.rightButton} color={['#7CD795', '#6ED58B']} onPress={onConfirm}>
              <Text style={styles.rightText} numberOfLines={1}>
                同意
              </Text>
            </LinearGradientButton>
          </View>
        </View>
      </View>
    </Modal>
  )
}

export default AppPrivacyAgreement

const styles = EStyleSheet.create({
  container: {
    width: 295,
    height: 436,
    borderRadius: 12,
    flexDirection: 'column',
    alignItems: 'center',
    overflow: 'hidden',
    backgroundColor: 'white',
  },
  linearWrap: {
    height: '100%',
  },
  top: {
    flexDirection: 'column',
    flex: 1,
  },
  titlewrap: {
    width: 295,
    paddingTop: 24,
    paddingBottom: 12,
  },
  title: {
    textAlign: 'center',
    color: '$fontColor',
    fontSize: 18,
    fontWeight: 'bold',
  },
  content: {
    flex: 1,
    marginHorizontal: 20,
    position: 'relative',
  },
  contentScroll: {
    flex: 1,
  },
  contentText: {
    color: '$common',
    fontsize: 13,
    lineHeight: 20,
  },
  link: {
    color: '$theme',
  },
  mask: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    height: 40,
    width: '95%',
    marginHorizontal: 'auto',
    zIndex: 5,
  },
  bottom: {
    height: 45,
    marginBottom: 24,
    marginTop: 8,
    paddingHorizontal: 16,
    width: '100%',
    flexDirection: 'row',
    backgroundColor: 'white',
  },
  rightWrap: {
    flex: 1,
  },
  leftButton: {
    flex: 1,
    marginRight: 23,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    borderWidth: 0.5,
    borderColor: '#D0D4DB',
  },
  leftText: {
    fontFamily: 'PingFangSC-Regular',
    color: '$fontColor',
    fontSize: 16,
    textAlign: 'center',
  },
  rightButton: {
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
  },
  rightText: {
    fontFamily: 'PingFangSC-Regular',
    color: 'white',
    fontSize: 16,
    textAlign: 'center',
  },
})
